<template>
  <div>
    <el-row  justify="center" :gutter="20">

      <el-col  :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-card class="indexCard lottery1" shadow="never">
          <el-row type="flex" justify="space-around">
            <el-col :span="4">
              <p>大乐透</p>
            </el-col>
            <el-col :span="4">
              <p>22092 期</p>
            </el-col>
          </el-row>

          <el-row type="flex" justify="space-around">
            <el-col :span="4">
              <p>已搜集</p>
            </el-col>
            <el-col :span="4">
              <p>
                <!-- <animate-number
                  :from="oldNum"
                  :to="num"
                  :key="num"
                  duration="1000"
                ></animate-number
                >注 -->
                16596
              </p>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-around">
            <el-col :span="6">
              <p  @click="cantClick">大乐透往期数据</p>
            </el-col>

            <el-col :span="6" >
              <p @click="cantClick">分析</p>
            </el-col>
          </el-row> <el-row type="flex" justify="space-around">
            <el-col :span="6">
              <p  @click="cantClick">计算号码中奖率</p>
            </el-col>

            <el-col :span="6" >
              <p @click="cantClick">计算号码返奖率</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
     <el-col  :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-card class="indexCard lottery2" shadow="never">
          <el-row type="flex" justify="space-around">
            <el-col :span="4">
              <p>双色球</p>
            </el-col>
            <el-col :span="4">
              <p>2022093期</p>
            </el-col>
          </el-row>

          <el-row type="flex" justify="space-around">
            <el-col :span="4">
              <p>当前票库</p>
            </el-col>
            <el-col :span="4">
              <p>未开始</p>
            </el-col>
          </el-row>
           <el-row type="flex" justify="space-around">
            <el-col :span="6" >
              <p @click="cantClick">双色球往期数据</p>
            </el-col>

            <el-col :span="6" >
              <p @click="cantClick">分析</p>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-around">
            <el-col :span="6">
              <p  @click="cantClick">计算号码中奖率</p>
            </el-col>

            <el-col :span="6" >
              <p @click="cantClick">计算号码返奖率</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-card>
          <div slot="header"><span>前区分析</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card>
          <div slot="header"><span>后区分析</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="usedmemory" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import { getRouters } from "@/api/menu";
export default {
  data() {
    return {
      oldNum: 0,
      num: 210872,
      commandstats: null,
      usedmemory: null,
      cache: [],
    };
  },
  methods: {
cantClick(){
 this.$alert("<font color='red'>抱歉！试用账号 不可使用本功能！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            })

},


    //获取当前的期数

    //获取当前搜集的票数
    getNowDateLottery1() {
      this.oldNum = this.num;
      this.num = this.num + 23;
      console.log(this.num);
    },
    inlineChart() {
      getRouters().then((response) => {
        this.cache = response.data;
        this.$modal.closeLoading();

        this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
        this.commandstats.setOption({
          xAxis: {
            type: "category",
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
              "25",
              "26",
              "27",
              "28",
              "29",
              "30",
              "31",
              "32",
              "33",
              "34",
              "35",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [
                2105, 37596, 41657, 35567, 19184, 39693, 8617, 37667,
                4481, 9525,  12392, 7983,  44389, 37596, 42424,40603,
                18627,  47463, 10364,    11767,

                10227,  2103,   40745,  18273,  9316,  12396,

                23386, 7842,  8612, 46904,170, 42632,   17084,   36969,   42420,
              ],
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        });
        this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
        this.usedmemory.setOption({
          xAxis: {
            type: "category",
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [12322
, 12464
, 70845
, 3647
, 81348
, 7289
, 12320
,70143

,6162

,23664

,21145

,10086


],
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        });
      });
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载缓存监控数据，请稍候！");
    },
  },
  mounted() {
    this.timer = setInterval(this.getNowDateLottery1, 5000);
  },
  created() {
    this.inlineChart();
    this.openLoading();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.indexCard {
  margin: 5%;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.lottery1 {
  background-color: #409eff;
  color: white;
  text-align: center;
  text-align: justify;
}
.lottery2 {
  background-color: #67c23a;
  color: white;
  text-align: center;
  text-align: justify;
}
p {
  font-family: Algerian, 幼圆;
  color: white;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
</style>
